
import 'package:flutter/material.dart';

class ButtonViewPage extends StatelessWidget {
  const ButtonViewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return   MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('按钮组件...'),),

        body: Container(
          child: Column(
            children: [
              ListTile(
                title: Text('第一个item'),
              ),
                //ElevatedButton 即"凸起"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大
                ElevatedButton(
                   onPressed: (){

                   },
                   child: Text('ji'),
                 ),
              TextButton(
                child: Text("文本按钮"),
                onPressed: () {},
              ),
              OutlinedButton(
                child: Text("边框按钮"),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.thumb_up),
                onPressed: () {},
              ),

              ElevatedButton.icon(
                icon: Icon(Icons.send),
                label: Text("发送"),
                onPressed:  (){

                      },
              ),


              TextButton.icon(
                icon: Icon(Icons.info),
                label: Text("详情"),
                onPressed: (){

                },
              ),

              SizedBox(
                height: 80,
                width: 200,
                child: ElevatedButton(
                  style:ButtonStyle(
                      /*
                      foregroundColor Color 文本颜色
                      backgroundColor Color 按钮的颜色
                       */
                      backgroundColor:MaterialStateProperty.all(Colors.yellow),
                      foregroundColor: MaterialStateProperty.all(Colors.white)
                  ) ,
                  onPressed: () {
                  },
                  child: const Text('宽度高度'),
                ),
              ),
              ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor:MaterialStateProperty.all(Colors.blue),
                    foregroundColor: MaterialStateProperty.all(Colors.white),
                    elevation: MaterialStateProperty.all(20),
                    shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10))
                    ),
                  ),
                  onPressed: () {
                    print("圆角按钮");
                  },
                  child: const Text('圆角')
              ),
              Container(
              height: 80,
              child: ElevatedButton(
    style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
        foregroundColor:
        MaterialStateProperty.all(Colors.white),
        elevation: MaterialStateProperty.all(20),
        shape: MaterialStateProperty.all(
          //CircleBorder(side: BorderSide(color: Colors.white)),
          CircleBorder(side: BorderSide(color: Colors.blue)),
        )),
                  onPressed: () {
                    print("圆形按钮");
                  },
                  child: const Text('圆形按钮')),
              )

              ,Expanded(
                child: Container(
                  margin: EdgeInsets.all(20),
                  height: 50,
                  child: OutlinedButton(
                      style: ButtonStyle(
                          //backgroundColor:MaterialStateProperty.all(Colors.blue),
                          foregroundColor: MaterialStateProperty.all(Colors.grey),
                          side: MaterialStateProperty.all(
                              const BorderSide(width: 1, color: Colors.grey))),
                      onPressed: () {},
                      child: const Text("注册 配置边框")),
                ),
              )


            ],
          ),
        ),


      ),
    );
  }
}
